<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .main {
        border: 100px solid transparent;
        border-bottom: 100px solid black;
        width: 0;
        height: 0;
    }
    .main2 {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        clip-path: polygon(50% 0,0 100%,100% 100%);
    }
    .main3 {
        width: 0;
        height: 0;
        /**/
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 87px solid red;
    }
    .main4 {
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom-color: red;
    }
    .main5 {
        width: 0;
        height: 0;
        border-radius: 50%;
        border: 100px solid transparent;
        border-left: 100px solid yellowgreen;
    }
</style>
<body>
<!--三角形-->
<div class="main">

</div>
<!--等腰三角形-->
<div class="main2">

</div>
<!--等边三角形-->
<div class="main3">

</div>
<!--等边三角形 js法-->
<div class="main4">

</div>
<!--扇形-->
<div class="main5">

</div>
<script>
    document.querySelector(".main4").style.borderBottomWidth = 100 * Math.tan(Math.PI / 3) + "px";
</script>
</body>
</html>
